<script setup>
import MessageHistory from './components/MessageHistory.vue'
import ChatMessage from './components/ChatMessage.vue'
</script>
<template>
  <div class="content">
    <el-row :gutter="10">
      <el-col :span="4" :offset="0" class="left-col">
        <MessageHistory />
      </el-col>
      <el-col :span="20" :offset="4" class="right-col">
        <div class="right">
            <ChatMessage />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.content {
  height: 100vh;
  overflow: hidden;
}

.left-col {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(25% - 7.5px);
  height: 100vh;
  padding-right: 10px;
  box-sizing: border-box;
}

.left-col ::v-deep .left {
  padding: 20px;
  background-color: #F0F9FE;
  height: 100%;
  overflow-y: auto;
}

.right-col {
  height: 100vh;
  box-sizing: border-box;
}

.right {
  padding: 10px;
  height: 100%;
  overflow-y: auto;
}

.container {
  background-color: #fff;
  min-height: 100%;
}
</style>